<template>
  <div class="showNews">
    <el-form ref="searchForm" :inline="true" :model="searchForm">
      <el-form-item label="Id" prop="id">
        <el-input v-model="searchForm.id" placeholder="请输入Id" />
      </el-form-item>
      <el-form-item label="标题" prop="title">
        <el-input v-model="searchForm.title" placeholder="请输入标题" />
      </el-form-item>
      <el-form-item label="板块" prop="class">
        <el-cascader
          v-model="searchForm.class"
          :options="classOptions"
          :props="{ checkStrictly: true }"
          collapse-tags
          clearable
          filterable
        />
      </el-form-item>
      <el-form-item label="状态" prop="state">
        <el-select
          v-model="searchForm.state"
          clearable
          placeholder="请选择状态"
        >
          <el-option
            v-for="item in stateOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
        <!-- <el-input v-model="searchForm.state" placeholder="请输入状态" /> -->
      </el-form-item>
      <el-form-item label="是否删除" prop="state">
        <el-select v-model="searchForm.deleted" placeholder="请选择">
          <el-option
            v-for="item in deletedOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="用户名" prop="name">
        <el-input v-model="searchForm.name" placeholder="请输入用户名" />
      </el-form-item>
      <el-form-item>
        <el-button v-waves type="primary" @click="getList">
          查询
        </el-button>
        <el-button v-waves type="primary" @click="resetForm('searchForm')">
          重置
        </el-button>
      </el-form-item>
    </el-form>
    <el-table
      :data="tableData"
      style="width: 100%; overflow-y: auto;"
      height="74vh"
    >
      <el-table-column prop="id" label="ID" width="100" />
      <el-table-column prop="title" label="标题" />
      <el-table-column prop="user" label="用户" width="200">
        <template slot-scope="scope">
          {{ scope.row.user.name }}
        </template>
      </el-table-column>
      <el-table-column prop="class" label="板块" width="100">
        <template slot-scope="scope">
          {{ aclass(scope.row.classId).name }}
        </template>
      </el-table-column>
      <el-table-column prop="map" label="分类" width="100">
        <template slot-scope="scope">
          {{ amap(scope.row.classId, scope.row.mapId).name }}
        </template>
      </el-table-column>
      <el-table-column prop="browse" label="浏览数" width="100" />
      <el-table-column prop="comments" label="评论数" width="100" />
      <el-table-column prop="time" label="投稿时间" width="200" />
      <el-table-column prop="state" label="稿件状态" width="100">
        <template slot-scope="scope">
          {{ scope.row.state.name }}
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="140">
        <template slot-scope="scope">
          <el-button
            v-if="scope.row.state.banner !== 1"
            type="text"
            size="small"
            @click="setBanner(scope.row)"
          >
            设为头条
          </el-button>
          <el-button
            v-if="scope.row.state.banner !== 1"
            type="text"
            size="small"
            @click="setState(scope.row)"
          >
            {{ scope.row.state.delete === 1 ? '恢复' : '删除' }}
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <Pagination
      :total="len"
      :limit.sync="limit"
      :page="page"
      @pagination="getList"
    />
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import waves from '@/directive/waves'
import Pagination from '@/components/Pagination'
import { getNewsList, postNewsState } from '@/api/news'
import { postBanner } from '@/api/public'
export default {
  name: 'ComplexTable',
  directives: { waves },
  components: { Pagination },
  data() {
    return {
      classProps: { multiple: true, checkStrictly: true },
      page: 1,
      limit: 10,
      len: 100,
      searchForm: {
        id: '',
        title: '',
        class: [],
        state: '',
        name: '',
        deleted: ''
      },
      tableData: [],
      stateOptions: [
        { value: 0, label: '未审核' },
        { value: -1, label: '被退回' },
        { value: 1, label: '已投稿' }
      ],
      deletedOptions: [
        { value: 0, label: '未删除' },
        { value: 1, label: '已删除' }
      ]
    }
  },
  computed: {
    ...mapGetters(['aclass', 'amap']),
    classOptions() {
      return this.$store.state.allClass.map((item) => {
        return {
          value: item.id,
          label: item.name,
          children: item.map.map((itemMap) => {
            return {
              value: itemMap.id,
              label: itemMap.name
            }
          })
        }
      })
    }
  },
  async created() {
    this.getList({ page: this.page, limit: this.limit })
  },
  methods: {
    async getList({ page = this.page, limit = this.limit }) {
      const self = this
      const result = await getNewsList({
        page,
        limit,
        ...self.searchForm
      })
      if (result.code === 1) {
        this.tableData = result.data
        this.len = result.len
      }
    },
    async setBanner(row) {
      const result = await postBanner({ id: row.id })
      if (result.code === 0) {
        this.$message({
          message: `设置${row.title}为banner成功`,
          type: 'success'
        })
        row.state.banner = 1
      } else {
        this.$message({
          message: `设置${row.title}为banner失败，${result.msg}`,
          type: 'error'
        })
      }
    },
    async setState(row) {
      const op = row.state.delete === 1 ? -1 : 1
      const result = await postNewsState({ id: row.id, op })
      if (result.code === 0) {
        this.$message({
          message: `${op === 1 ? '删除' : '恢复'}稿件${row.title}成功`,
          type: 'success'
        })
        row.state.delete = op === 1 ? 1 : 0
      } else {
        this.$message({
          message: `${op === 1 ? '删除' : '恢复'}稿件失败，${result.msg}`,
          type: 'error'
        })
      }
    },
    resetForm(formName) {
      this.$refs[formName].resetFields()
    }
  }
}
</script>

<style lang="scss" scoped>
@import '~@/styles/mixin.scss';
.showNews {
  padding: 20px;
}
.el-form {
  height: 50px;
}
/deep/ .el-table__body-wrapper {
  @include scrollBar();
}
/deep/ .el-input {
  width: 120px;
}
</style>
